import React from 'react'
import { Button, InputItem, Toast } from 'antd-mobile';
export default class ContactRequest extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            phone:'',
        }
    }
    render(){
        return (
            <div className='contact_request'>
                <div className='request_top'>
                    <h2>hi,请输入您的需求</h2>
                    <p>如果您有建站及产品运维开发服务需求，
                        请在此留下您的联系方式，我们会提供给您一站式服务，
                        丰富的建站经验和设计团队为您的需求而生...</p>
                </div>
                <div className='request_inp'>
                    <div className='request_inp_top'>
                        <InputItem
                            type="phone"
                            placeholder="请输入您的联系方式"
                            value={this.state.phone}
                            onChange={this.onChangePhone}
                            error={this.state.hasError}
                            onErrorClick={this.onErrorClick}
                        >您的联系方式</InputItem>
                    </div>
                    <div className='request_inp_con'>
                        <textarea name="" id="" cols="30" rows="10" placeholder='请输入您的需求'></textarea>
                        <Button className='button_style'>提交</Button>
                    </div>
                </div>
            </div>
        )
    }
    onChangePhone = (value) => {
        if (value.replace(/\s/g, '').length < 11) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            phone:value,
        });
    }
    onErrorClick = () => {
        if (this.state.hasError) {
            Toast.info('请输入11位数字');
        }
    }
}